<template>
<div>
    <canvas id="canvas" width="600" height="600"></canvas>
<!--    <img src="@/assets/images/arrow.png" alt="arrow">-->
</div>

</template>

<script>
export default {
    name: "CanvasRound",
    data() {
        return {
            canvas :undefined, // canvas元素
            ctx:undefined, // 画布上下文
            textRadius: 80, // 文字圆的半径
            insideDashedCircleRadius: 100, // 内部虚线圆的半径
            theRadiusOfTheGrayCircle: 150,// 灰色圆的半径
            circleRadius: 50, // 外围圆的半径
            theRadiusOfTheOuterGrayCircle: 60, // 外围灰色圆的半径
            rotationSpeed: 0.02, // 旋转速度
            angle: 0, // 旋转角度
            outerCircleTextList:['采购销售','物流配送','仓储集散'], // 外围圆的文字列表
        };
    },
    mounted() {
        this.canvas = document.getElementById('canvas')
        this.ctx = this.canvas.getContext('2d') // 获取画布上下文
        const centerX = this.canvas.width / 2; // 中心的x坐标
        const centerY = this.canvas.height / 2; // 中心的y坐标


        // 添加两个图片在中心圆的上方和下方
        const img1 = new Image();
        img1.src = require('@/assets/images/arrow.png');
        const img2 = new Image();
        img2.src = require('@/assets/images/arrow.png');
        const _this = this;
        function drawFrame() {
            _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height); // 清除画布
            //绘制灰色圆
            _this.drawCircle(centerX, centerY, _this.theRadiusOfTheGrayCircle, '#f3f4ff');
            // 绘制中心的圆和文字
            _this.drawCircle(centerX, centerY, _this.textRadius, '#00a09f');
            // 给中间圆添加文字
            _this.ctx.font = '16px 微软雅黑'; // 设置文字颜色
            _this.ctx.textAlign = 'center'; // 设置文字居中对齐
            _this.ctx.textBaseline = 'middle'; // 设置文字垂直居中对齐
            _this.ctx.fillStyle = '#FFFFFF'; // 设置文字颜色
            _this.ctx.fillText('质量控制体系', centerX, centerY-30); // 绘制文字
            _this.ctx.fillText('成本控制体系', centerX, centerY+30); // 绘制文字

            _this.ctx.drawImage(img1, centerX - 40, centerY - 20, 40, 40); // 绘制图片
            _this.ctx.drawImage(img2, centerX , centerY - 20, 40, 40); // 绘制图片

            // 绘制内部虚线圆
            _this.drawStrokeCircle(centerX, centerY, _this.insideDashedCircleRadius,'#999999')


            // 绘制外部虚线圆
            _this.drawStrokeCircle(centerX, centerY, _this.theRadiusOfTheGrayCircle + _this.theRadiusOfTheOuterGrayCircle,'#999999')

            // 绘制三个外围圆
            for (let i = 0; i < _this.outerCircleTextList.length; i++) {

                const circleX = centerX + Math.cos(_this.angle + i * (2 * Math.PI / 3)) * (_this.theRadiusOfTheGrayCircle + _this.circleRadius + 10)
                const circleY = centerY + Math.sin(_this.angle + i * (2 * Math.PI / 3)) * (_this.theRadiusOfTheGrayCircle + _this.circleRadius + 10 )

                // 绘制灰色圆
                _this.drawCircle(circleX, circleY, _this.theRadiusOfTheOuterGrayCircle, '#f3f3f3');
                // 绘制有文字圆
                _this.drawCircle(circleX, circleY, _this.circleRadius, '#20c8c7');
                // 绘制文字
                _this.ctx.font = '16px 微软雅黑'; // 设置文字颜色
                _this.ctx.textAlign = 'center'; // 设置文字居中对齐
                _this.ctx.textBaseline = 'middle'; // 设置文字垂直居中对齐
                _this.ctx.fillStyle = '#FFFFFF'; // 设置文字颜色
                _this.ctx.fillText(_this.outerCircleTextList[i], circleX, circleY); // 绘制文字
            }

            _this.angle += _this.rotationSpeed; // 旋转速度
            requestAnimationFrame(drawFrame);
        }

        drawFrame();
        // 监听鼠标移动事件
        this.canvas.addEventListener('mousemove', function(e) {
            var x = e.pageX - _this.canvas.offsetLeft;
            var y = e.pageY - _this.canvas.offsetTop;
            var dx = x - centerX;
            var dy = y - centerY;
            var distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < _this.theRadiusOfTheGrayCircle + _this.theRadiusOfTheOuterGrayCircle * 2) {
                _this.rotationSpeed = 0;
            } else {
                _this.rotationSpeed = 0.02;
            }
        });
    },
    methods: {
        /**
         * 绘制圆
         * @param x
         * @param y
         * @param radius
         * @param color
         */
        drawCircle(x, y, radius, color){
            this.ctx.beginPath();
            this.ctx.arc(x, y, radius, 0, 2 * Math.PI);
            this.ctx.fillStyle = color;
            this.ctx.fill();
        },
        /**
         * 绘制虚线空心圆
         * @param x
         * @param y
         * @param radius
         * @param color
         * @param segments
         */
        drawStrokeCircle(x, y, radius, color,segments =[5, 5] ){
            this.ctx.setLineDash(segments); // 设置虚线样式
            this.ctx.beginPath();
            this.ctx.arc(x, y, radius, 0, 2 * Math.PI);
            this.ctx.strokeStyle = color; // 设置虚线颜色
            this.ctx.stroke();
        }
    }
}
</script>

<style scoped>

</style>
